<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix ListBox with swipe commands</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="./src/MessageSummary.js"></script>
    <script type="module" src="./src/MessageListBox.js"></script>

    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        padding: 0;
      }
    </style>
  </head>

  <body role="main">
    <div class="demo fullScreen portrait">
      <style>
        #messageListBox {
          border: none;
          font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
            Roboto, Ubuntu;
          font-size: 18px;
          flex: 1;
          max-height: 100%;
          max-width: 100%;
        }
      </style>
      <message-list-box id="messageListBox" aria-label="Messages">
        <message-summary
          date="Nov 13"
          sender="Maricruz Bourgault"
          summary="Wine Country Visit"
        >
          We would love to host you out here in the Sonoma Valley. The guest
          house is done on our Sonoma farm and we would love to see you.
        </message-summary>
        <message-summary
          date="Nov 7"
          sender="Chu Goldie"
          summary="Administrative Assistant Need"
        >
          Dear Members, We're looking for a "top-notch" administrative
          assistant. Any leads you can give us would certainly be appreciated.
        </message-summary>
        <message-summary
          date="Oct 25"
          sender="Chuck Happel"
          summary="A little good news"
        >
          I met with Peter Veruki at the Jones School of Administration at Rice
          last week and we had a great meeting. Our timing is a little off (they
          want someone next spring and I want a position by Jan), but we are
          still talking.
        </message-summary>
        <message-summary
          date="Oct 24"
          sender="Nidia Hartzler"
          summary="Thank you"
        >
          Thank you for your presentation yesterday. As always, you handled very
          well some tough questions
        </message-summary>
        <message-summary
          date="Oct 23"
          sender="Shakita Marton"
          summary="All employee meeting"
        >
          Well done. I want you to know that I am on board and 100% committed to
          do my best for the company.
        </message-summary>
        <message-summary
          date="Oct 15"
          sender="Lesia Buffum"
          summary="Reuters story on 3Q earnings"
        >
          We'll get pointed questions related to Europe and broadband. Suggest
          we answer that we feel confident that the first mover advantage will
          give us superior returns in the long run.
        </message-summary>
        <message-summary
          date="Oct 15"
          sender="Sima Delosh"
          summary="Conference & workshop"
        >
          I would be happy to participate in the conference and workshop. Could
          we arrange a time to discuss the details later this week?
        </message-summary>
        <message-summary
          date="Oct 8"
          sender="Jada Wagnon"
          summary="RE: Flowers"
        >
          Flowers have been ordered and will be delivered to Sharon's office on
          Tuesday morning.
        </message-summary>
        <message-summary
          date="Sep 28"
          sender="Glynis Harrop"
          summary="Pipeline problem"
          read="true"
        >
          I spent a week on the project and my subcontractor was out his
          mobilization cost, and after more than a year, they finally paid a
          part of our cost.
        </message-summary>
        <message-summary
          date="Sep 26"
          sender="Aurea Cook"
          summary="RE: Board Dinner Meeting"
          read="true"
        >
          Per your request, I have attached a photo of the ornament.
        </message-summary>
        <message-summary
          date="Sep 25"
          sender="Galen Houk"
          summary="FW: updated travel policy"
        >
          Please see attached revised travel advisory. I think it does a better
          job of balancing the competing interests.
        </message-summary>
        <message-summary
          date="Sep 24"
          sender="Zachariah Bollinger"
          summary="Organization Changes"
        >
          Below is an organization chart which displays the changes described
          here. We are confident this new organization will focus our talent and
          capital appropriately. Please join me in supporting this management
          team as it strives to maximize return.
        </message-summary>
        <message-summary
          date="Sep 21"
          sender="Toby Reddin"
          summary="Accepted: India Meeting"
          read="true"
        >
          Stan will call in.
        </message-summary>
        <message-summary
          date="Aug 7"
          sender="Sueann Ikner"
          summary="thought you might be interested in this"
          read="true"
        >
          I am emailing in the hopes of having an opportunity to talk if you are
          interested in the following possibility
        </message-summary>
        <message-summary
          date="Aug 4"
          sender="Shanae Meiser"
          summary="How can I help?"
          read="true"
        >
          If there's anything you'd like to talk about, at any point, please do
          get in touch.
        </message-summary>
        <message-summary
          date="Jul 14"
          sender="Shantay Courts"
          summary="Anniversary lunch"
          read="true"
        >
          Today I am receiving my 15 Years of Service Award and having my
          Anniversary lunch. Would you like to attend?
        </message-summary>
        <message-summary
          date="Jun 4"
          sender="Kathy Dasher"
          summary="Meeting Cancellation - Reminder"
          read="true"
        >
          Don't forget... Our Board of Trustees Meeting has been cancelled.
          (Please call me if you have questions regarding this matter.)
        </message-summary>
        <message-summary
          date="May 24"
          sender="Laronda Scrivens"
          summary="Coming trip on May 29th"
          read="true"
        >
          With your permission, Harry and I will plan to bring our golf clubs on
          the airplane on Tuesday. I plan to buy one of those little traveling
          golf bags (very small) and carry only about 5 or 6 of my clubs with
          me.
        </message-summary>
        <message-summary
          date="Jan 18"
          sender="Tayna Agnew"
          summary="FW: Development exhibits"
          read="true"
        >
          Attached is the second part of the email for the Development
          Committee. Please note that these documents should be opened in Word.
          Please call if you should have questions.
        </message-summary>
        <message-summary
          date="Jan 15"
          sender="Shyla Spofford"
          summary="draft employee memo"
          read="true"
        >
          The NYSE has standard criteria for listing stocks, which can be found
          on their website at www.nyse.com.
        </message-summary>
      </message-list-box>
    </div>
  </body>
</html>
